*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    list-style:none ;
}
.todoapp {
    width: 50vw;
    border: 1px solid black;
    margin: 0 auto;
  .header {
      width: 100%;
      background: #bbb;

    h1 {
        width: 100%;
        font-size: 80px;
        opacity: 0.4;
        text-align: center;

    }
    .inputBox{
        width: 100%;
        display: flex;
        align-items: center;
        .checkAll{
            width: 30px;
            height: 30px;
            
            
        }
        .new-todo {
            width: 400px;
            height: 50px;
            outline: none;
            border: 0;
        }
    }
    
    
  }

.todo-list {
    width: 100%;
  .todo {
      width: 100%;
      .view {
          width: 100%;
          display: flex;
          background: #bbb;
        input.toggle {
            width: 30px;
            height: 30px;

        }

        label {
            width: 370px;
            height: 30px;

        }

        .destroy {
            width: 30px;
            height: 30px;
            font-size: 12px;

        }
      }
    }
  }

.bottom {
    div.left {

    }

    .mid {

    }

    .right {

    }
  }
}